import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { getweifanbu, addweicsc } from '../api/api'
import { PlusOutlined } from '@ant-design/icons'
import { Modal, Upload, Radio } from 'antd'
import '../fanbu.css'
const getBase64 = (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (error) => reject(error)
  })
function Fanbu() {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [previewOpen, setPreviewOpen] = useState(false)
  const [previewImage, setPreviewImage] = useState('')
  const [previewTitle, setPreviewTitle] = useState('')
  const [fileList, setFileList] = useState([])
  const [rideos, setrideos] = useState('')
  const [jiag, setjiag] = useState('')
  const [shuru, setshuru] = useState('')
  const handleCancel = () => setPreviewOpen(false)
  const handlePreview = async (file) => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj)
    }
    setPreviewImage(file.url || file.preview)
    setPreviewOpen(true)
    setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
  }
  const handleChange = ({ fileList: newFileList }) => setFileList(newFileList)
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div
        style={{
          marginTop: 3,
        }}
      >
        上传图片
      </div>
    </div>
  )
  useEffect(() => {
    //获取数据
    getweifanbu().then((res) => {
      console.log(res)
      if (res.code == 200) {
        setList([...res.data])
      }
    })
  }, [])

  //跳转
  function func(url, id) {
    console.log(url)
    navigate(url, {
      state: {
        id: id,
      },
    })
  }
  return (
    <div>
      <div className="shingc" >
        商品发布
        <span
          className="fanbu"
          onClick={() => {
            addweicsc({ jiang: jiag, img: 'http://127.0.0.1:7001' + fileList[0].response.data.replace('/', 'g'), tagex: shuru, leixin: rideos, toxi: "http://127.0.0.1:7001/public/tican/7.png", name: "s1mple", }).then((res) => {
              console.log(res)
            })
            func('/shichang')
          }}
        >
          发布
        </span>
      </div>
      <div className="nanro">
        <div>
          {list.map((item) => {
            return (
              <div key={item.id}>
                <img
                  src={item.img}
                  className="fanbuimg"
                  onClick={() => {
                    func('/shichang')
                  }}
                ></img>
              </div>
            )
          })}
        </div>
      </div>
      <div className="duanxuan1">
        <div className="duanxuan">
          类型
          <Radio.Group defaultValue={1}>
            <Radio
              value={'二手物品'}
              onClick={(event) => {
                setrideos(event.target.value)
                console.log(rideos)
              }}
            >
              二手物品
            </Radio>
            <Radio
              value={'新品'}
              onClick={(event) => {
                setrideos(event.target.value)
                console.log(rideos)
              }}
            >
              新品
            </Radio>
          </Radio.Group>
        </div>
      </div>
      <div className="jiange1">
        <div className="jiange">
          价格
          <input
            type="text"
            onChange={(e) => {
              setjiag(e.target.value)
            }}
          />
        </div>
      </div>
      <div className="jiesao">
        <input
          type="text"
          placeholder="写点商品的介绍文字吧"
          onChange={(e) => {
            setshuru(e.target.value)
          }}
        />
      </div>
      <div className="sc">
        <Upload action="http://127.0.0.1:7001/upload" listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
          {fileList.length >= 3 ? null : uploadButton}
        </Upload>
        <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
          <img
            alt="example"
            style={{
              width: '100%',
            }}
            src={previewImage}
          />
        </Modal>
      </div>
    </div>
  )
}
export default Fanbu
